<template>
	<cl-tabbar :value="active" @change='navNarChange' color='#ced2de' selected-color='#47c4d9'
		:before-switch="onBeforeSwitch" background-color="#fff">
		<cl-tabbar-item text="首页" name="home" icon-path="/static/images/components/BottomNavBar/homeN.webp"
			selected-icon-path="/static/images/components/BottomNavBar/home.webp">
		</cl-tabbar-item>
		<cl-tabbar-item text="菜单" name="menu" icon-path="/static/images/components/BottomNavBar/orderN.webp"
			selected-icon-path="/static/images/components/BottomNavBar/order.webp">
		</cl-tabbar-item>
		<cl-tabbar-item text="我的" name="mine" icon-path="/static/images/components/BottomNavBar/userN.webp"
			selected-icon-path="/static/images/components/BottomNavBar/user.webp">
		</cl-tabbar-item>
	</cl-tabbar>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				timerId: null,
				visible: false
			}
		},
		computed: {
			...mapState({
				active: store => store.navBarActive
			})
		},
		props: [],
		methods: {
			//点击切换按钮的时候调用仓库的内容
			navNarChange(name) {
				this.$store.dispatch('changeNavBar', name)
			},
			// //切换导航前
			onBeforeSwitch(name, next) {
			// 	if (name === 'scan') {
			// 		return
			// 	}
				next()
			}
		}
	}
</script>

<style>
</style>
